<template>
  <div>
    <div style="width: 500px;margin:  30px auto">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="车牌号" prop="licenseNumber">
          <el-input v-model="form.licenseNumber" placeholder="请输入车牌号"/>
        </el-form-item>
        <el-form-item label="车牌颜色">
          <el-select v-model="form.lpcid" style="width: 100%">
            <el-option v-for="item in this.carsPlateColorsList" :key="item.lpcid" :label="item.carsPlateName" :value="item.lpcid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车场名称">
          <el-select v-model="form.carsHome.chid" @visible-change="carsList" clearable>
            <el-option v-for="item in this.carList" :key="item.chid" :label="item.chname" :value="item.chid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆类型" >
          <el-select v-model="form.ctid" @visible-change="carsType" clearable :disabled="form.carsHome.chid === null || form.carsHome.chid === '' || form.carsHome.chid === undefined">
            <el-option v-for="item in this.carTList" :key="item.carsType.ctid" :label="item.carsType.typeName" :value="item.carsType.ctid"></el-option>
          </el-select>
          <el-button type="primary" style="display: inline-block;margin-left: 12px">新增</el-button>
        </el-form-item>
        <el-form-item label="关联业主">
          <el-select v-model="form.omid" style="width: 100%" clearable>
            <el-option v-for="item in this.ownerList" :key="item.omid" :label="item.ownerName" :value="item.omid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea"
                    :rows="2"
                    placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="exitCan">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {addCars_info, getCars_info, updateCars_info} from "@/api/info/cars_info";
import {listHome, listProperty, listOwner_info, listColors} from "@/api/ruoyi-home/home";
import {listType, getType, delType, addType, updateType} from "@/api/info/type";
import {listCt} from "@/api/info/ct";

export default {
  name: "upcars",
  data() {
    return {
      // properList: [],
      carList: [],
      carTList: [],
      carsPlateColorsList: [],
      ownerList: [],
      queryParams: {},
      title: "修改车辆信息",
      // 表单参数
      form: {
        propertyManagement: {},
        carsHome: {},
        ownerMsg: {},
        carsType: {},
        carsPlateColors: {},
      },
      // 表单校验
      rules: {
        createTime: [
          {required: true, message: "创建时间不能为空", trigger: "blur"}
        ],
        updateTime: [
          {required: true, message: "修改时间不能为空", trigger: "blur"}
        ],
        licenseNumber: [
          {required: true, message: "车牌号不能为空", trigger: "blur"}
        ],
        ctid: [
          {required: true, message: "车辆类型id不能为空", trigger: "change"}
        ],
        lpcid: [
          {required: true, message: "车牌颜色id不能为空", trigger: "change"}
        ],
        pmid: [
          {required: true, message: "物业id不能为空", trigger: "change"}
        ],
        omid: [
          {required: true, message: "业主id不能为空", trigger: "change"}
        ],
        chid: [
          {required: true, message: "车场id不能为空", trigger: "change"}
        ]
      },
      // 表单重置
      reset() {
        this.form = {
          cmid: null,
          code: null,
          status: null,
          deleted: null,
          createTime: null,
          updateTime: null,
          licenseNumber: null,
          ctid: null,
          lpcid: null,
          pmid: null,
          carsTel: null,
          omid: null,
          chid: null,
          remark: null,
          carsHome: {
            chid: null,
            chname: null,
          },
          ownerMsg: {
            omid: null,
            ownerName: null,
            ownerTel: null,
          },
          carsType: {
            ctid: null,
            typeName: null,
          },
          carsPlateColors: {
            lpcid: null,
            carsPlateName: null,
          },
        };
        this.propertyManagementList = [];
        this.resetForm("form");
      },
    }
  },
  methods: {
    getCarsCor() {
      listColors().then(res=>{
        this.carsPlateColorsList = res.rows
      })
    },
    getCarsOwner(){
      listOwner_info().then(res=>{
        this.ownerList = res.rows
      })
    },
    // prosList() {
    //   listProperty().then(res => {
    //     this.properList = res.rows;
    //     this.queryParams.chid = null;
    //     this.queryParams.ctid = null;
    //   })
    // },
    carsList() {
      listHome(this.form.propertyManagement.pmid).then(res => {
        this.carList = res.rows;
        if (this.form.carsHome.chid !== null || this.form.carsHome.chid !== '' || this.form.carsHome.chid !== undefined) {
          this.carsType();
        }
        if (this.form.carsHome.chid === null || this.form.carsHome.chid === '' || this.form.carsHome.chid === undefined) {
          this.form.carsType.ctid = null;
          this.carsType();
        }
      })
    },
    carsType() {
      listCt(this.form.carsHome).then(res=>{
        this.carTList = res.rows;
      })
    },
    exitCan() {
      this.$store.dispatch('tagsView/delAllViews', this.$router);
      this.$router.push('cars_info');
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addCars_info(this.form).then(response => {
            this.$modal.msgSuccess("添加成功");
            this.$store.dispatch('tagsView/delAllViews', this.$router);
            this.$router.push('cars_info');
            this.getList();
          });
        }
      });
    },
  },
  created() {
    // this.prosList();
    this.carsList();
    this.getCarsOwner();
    this.getCarsCor();
  }
}
</script>

<style scoped>

</style>
